<template>
  <div class="pages integral-upgrade" id="app">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form class="demo-ruleForm">
          <el-form-item label="升级方式" label-width="100px">
            <el-radio-group v-model="upgradeType" :disabled="isOwnAuth=='0'" @change="upgradeChange">
              <el-radio :label="1">手动升级</el-radio>
              <el-radio :label="2">按累计金额</el-radio>
              <el-radio :label="0">按累计积分</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" :row-style="{height:'65px'}" style="width: 100%">
          <el-table-column prop="name" label="等级名称" align="center"></el-table-column>
          <el-table-column prop="levelDescribe" label="等级说明" align="center"></el-table-column>
          <el-table-column prop="typeId" align="center" label="累计消费金额">
            <template slot-scope="scope">
              <el-input :disabled="isOwnAuth=='0'" class="upgrade-input" clearable maxlength="8" @blur="promotion(scope.$index,scope.row)" v-show="upgradeType==2&&scope.row.levelType!=1" v-model="scope.row.totalAmount" placeholder="请填写正整数" size="small" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span v-show="upgradeType!=2||scope.row.levelType==1">{{scope.row.totalAmount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="typeId" align="center" label="累计积分">
            <template slot-scope="scope">
              <el-input :disabled="isOwnAuth=='0'" class="upgrade-input" clearable maxlength="8" @blur="promotion(scope.$index,scope.row)" v-show="upgradeType==0&&scope.row.levelType!=1" v-model="scope.row.integral" placeholder="请填写正整数" size="small" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span v-show="upgradeType!=0||scope.row.levelType==1">{{scope.row.integral}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="typeId" align="center" label="等级持续时间（月）" width="280">
            <template slot-scope="scope">
              <el-checkbox class="scope-checkbox" v-model="scope.row.validType" :true-label="1" :false-label='0' :disabled="upgradeType==1||isOwnAuth=='0'" @change="checkedCities(scope.$index,scope.row)" v-show="scope.row.levelType!=1">有时限</el-checkbox>
              <el-input :disabled="isOwnAuth=='0'" class="upgrade-input" clearable maxlength="8" @blur="promotion(scope.$index,scope.row)" v-if="scope.row.validType!='0'" v-show="upgradeType!=1&&scope.row.levelType!=1" v-model="scope.row.retainTime" placeholder="请填写正整数" size="small" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span v-show="upgradeType==1&&scope.row.retainTime!=0&&scope.row.levelType!=1">{{scope.row.retainTime}}</span>
              <span v-if="scope.row.retainTime!=''&&scope.row.levelType!=1">个月</span>
              <span v-if="scope.row.levelType==1">无</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button :disabled="dis" size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  updateMemberLevelUpgradeType,
  listMemberLevel,
  updateMemberLeverUpgradeTypeByManual
} from "@/api";
import util from "@/util";
export default {
  computed: mapState(["merchantId", "sub", "power", "isOwnAuth"]),
  data() {
    return {
      upgradeType: 1,
      dis: false,
      selectdata: {
        keyword: ""
      },
      selectdatas: {
        keyword: ""
      },
      searchData: "",
      supplierType: [],
      tableData: [],
      memberlList: [],
      multipleSelection: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      ids: ""
    };
  },
  created() {},
  mounted() {
    console.log(this.isOwnAuth);
    // 获取表格数据
    this.tableget(20, 1);
  },
  methods: {
    upgradeChange() {
      this.updateMemberLever();
    },
    checkedCities(index, row) {
      if (row.validType == "1" && row.retainTime == "") {
        this.tableData[index].retainTime = "12";
      }
      if (row.validType == "0") {
        this.tableData[index].retainTime = "";
      }
      this.promotion(index, row);
    },
    promotion(index, row) {
      //upgradeType 0 累计积分
      //upgradeType 2 累计金额
      // console.log(this.upgradeType);
      // console.log(row.integral);
      // console.log(row.retainTime);
      // console.log(row.validType);
      // console.log(1111);
      if (
        this.upgradeType == 0 &&
        row.integral != "" &&
        row.integral != null &&
        ((row.retainTime != "" && row.validType == 1) || row.validType == 0)
      ) {
        if (
          this.memberlList[index].integral != row.integral ||
          this.memberlList[index].retainTime != row.retainTime ||
          this.memberlList[index].validType != row.validType
        ) {
          this.updateMember(row);
        }
      }
      if (
        this.upgradeType == 2 &&
        row.totalAmount != "" &&
        row.totalAmount != null &&
        ((row.retainTime != "" && row.validType == 1) || row.validType == 0)
      ) {
        if (
          this.memberlList[index].totalAmount != row.totalAmount ||
          this.memberlList[index].retainTime != row.retainTime ||
          this.memberlList[index].validType != row.validType
        ) {
          this.updateMember(row);
        }
      }
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let data = {
        pageSize: pageSize,
        pageNum: pageNum,
        status: "0",
        companyId: this.merchantId
      };
      listMemberLevel(data).then(res => {
        if (res.code == "200") {
          this.totalItems = res.data.totalPage;
          this.tableData = res.data.memberLevelList;
          if (this.tableData.length != 0) {
            this.upgradeType = this.tableData[0].upgradeType;
          }
          for (let i = 0; i < this.tableData.length; i++) {
            if (
              this.tableData[i].totalAmount == 0 &&
              this.tableData[i].levelType != 1
            ) {
              this.tableData[i].totalAmount = null;
            }
            if (
              this.tableData[i].integral == 0 &&
              this.tableData[i].levelType != 1
            ) {
              this.tableData[i].integral = null;
            }
          }
          this.memberlList = this.tableData.map(function(item) {
            return {
              retainTime: item.retainTime,
              totalAmount: item.totalAmount,
              integral: item.integral,
              validType: item.validType
            };
          });
        }
      });
    },
    updateMemberLever() {
      let data = {
        upgradeType: this.upgradeType,
        companyId: this.merchantId
      };
      updateMemberLeverUpgradeTypeByManual(data).then(res => {
        if (res.code == "200") {
          this.tableget(this.pageSize, this.currentPage);
          this.$message({
            type: "success",
            message: "成功!"
          });
        }
      });
    },
    // 获取表格数据
    updateMember(row) {
      var data = {
        id: row.id,
        upgradeType: this.upgradeType,
        validType: row.validType,
        retainTime: row.retainTime,
        companyId: this.merchantId
      };
      if (this.upgradeType == "0") {
        data.integral = row.integral;
      } else if (this.upgradeType == "2") {
        data.totalAmount = row.totalAmount;
      }
      if (row.validType == 0) {
        data.retainTime = "";
      }
      updateMemberLevelUpgradeType(data).then(res => {
        if (res.code == "200") {
          this.$message({
            type: "success",
            message: "成功!"
          });
        }
        this.tableget(this.pageSize, this.currentPage);
      });
    },
    // 查询
    searchSelect() {
      this.selectdatas = this.selectdata;
      this.tableget(20, 1);
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.tableget(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style scoped>
.showmore {
  display: block;
}
#app {
  text-align: left;
}
.upgrade-input {
  width: 150px;
}
.scope-checkbox {
  margin: 0;
}
</style>

